<template>
  <div class="leftList fx__scroll_box">
    <div class="fx_title">城市概况</div>
    <div class="toolBar"></div>
    <div class="list">
      <div :class="['fx-box', { 'fx__item-selected': choseIndex == index }]" v-for="(item, index) in markerData" :key="index" @click="boxChose(item, index)">
        <div :class="['cityName',{'choseName':choseIndex == index }]">{{ item.name }}</div>
        <div class="cityDesc fx-flex">
          <div class="detailBox fx-flex-1">
            <div class="detailLabel">机械总量</div>
            <div class="detailLabel"><span class="detailNum">{{ item.machine_cnt }}</span> 辆</div>
          </div>
          <div class="detailBox fx-flex-1">
            <div class="detailLabel">监管机械</div>
            <div class="detailLabel"><span class="detailNum">{{ item.gps_machine_cnt }}</span> 辆</div>
          </div>
          <div class="detailBox fx-flex-1">
            <div class="detailLabel">在线机械</div>
            <div class="detailLabel"><span class="detailNum">{{ item.online_cnt }}</span> 辆</div>
          </div>
          <div class="detailBox fx-flex-1">
            <div class="detailLabel">告警数量</div>
            <div class="detailLabel"><span class="detailNum" style="color:red">{{ item.warn_cnt }}</span> 辆</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import markerData from "@/views/mock/markerData.json";
export default {
  data() {
    return {
      choseIndex: 0,
      markerData: null,
    };
  },
  mounted() {
    let self = this;
    this.markerData = markerData.sort((a, b) => {
      return a.code - b.code;
    });
    this.$bus.$on("clickPoint", (code) => {
      self.choseIndex = self.markerData.findIndex((item) => {
        return item.code == code;
      });
    });
  },
  beforeDestroy() {
    this.$bus.$off("clickPoint");
  },
  methods: {
    boxChose(obj, i) {
      if (this.choseIndex != i) {
        this.$bus.$emit("clickCity", obj);
        this.choseIndex = i;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.leftList {
  width: calc(100% - 20px);
  height: 100%;
  position: relative;
  padding-right: 20px;
}
.fx-box {
  color: rgba($color: #fff, $alpha: 0.7);
  width: 100%;
  // height: 150px;
  background: #35424a;
  margin-bottom: 10px;
  padding: 16px;
  box-sizing: border-box;
  cursor: pointer;
  &:hover {
    background: #293a47;
  }
  &:last-child {
    margin-bottom: 0;
  }
  .cityName {
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 12px;
  }
  .choseName {
    color: #fff;
  }
  .cityDesc {
    font-size: 12px;
    font-weight: 500;
    line-height: 22px;
    // .detailLabel {

    // }
    .detailNum {
      font-size: 16px;
      font-weight: bold;
    }
  }
}
</style>